<script lang="ts" setup>
import {commonTransform} from '@/utils/transform';

import {searchProduct, getChaptersAndEpisodes} from '@/api/product';

import type {ColumnsType} from 'ant-design-vue/es/table';
import type {IChapter, IProduct, ISearchParams,} from '@/types/request';
import type {TransformProduct} from '@/types/table-transform';

const teachers = $ref<Map<number, any>>(new Map())

// 转换数据格式
function transformProduct(product: IProduct): TransformProduct {
    return {
        ...commonTransform(product),
        teacher_id: {
            text: teachers.get(product.teacher_id)?.name || '未设置',
            value: product.teacher_id
        }
    }
}

// 视频模块的表格列格式
const colums = $ref<ColumnsType>([
    {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        ellipsis: true,
        width: 200,
        fixed: true
    },
    {
        title: '缩略图',
        dataIndex: 'cover_img',
        key: 'cover_img',
        notShowInput: true,
        ellipsis: true,
        width: 40,
        showImage: true
    },
    {
        title: '视频管理',
        key: 'video',
        width: 200,
        notShowInput: true,
    }
])


const searchParams = reactive<ISearchParams>({
    page: 1,
    size: 6,
    total: 0,
    condition: '',
})

// 搜索按钮
let realDataSource = $ref<TransformProduct[]>([])

async function handleRequest() {
    const response = await searchProduct(searchParams)
    realDataSource = response.data?.current_data?.map(item => transformProduct(item))
    return response
}

// 章列表
let chapters = $ref<IChapter[]>([])
// 课程id
let productId = $ref<number>(-1)
// 控制弹窗展示与否
let modalVisible = $ref<boolean>(false)

// 点击管理按钮
async function handleManager(index: number) {
    modalVisible = !modalVisible
    productId = realDataSource[index].id.value
    const {data} = await getChaptersAndEpisodes(productId)
    // 章集排序
    chapters = data.sort((a, b) => a.ordered - b.ordered).map(chapter => {
        chapter.episodeList.sort((c, d) => c.ordered - d.ordered)
        return chapter
    })
}

// 关闭弹窗
function handleModalCancel() {
    chapters = []
    productId = -1
}
</script>

<template>
    <div>
        <Search name="课程" :on-search-request="handleRequest" :searchParams="searchParams"/>
        <Table notGmt custom ref="table" :searchParams="searchParams" :expand-columns="colums"
               :real-data-source="realDataSource" :on-request="handleRequest">
            <template #default="{ column, index }">
                <template v-if="column.key === 'video'">
                    <a-button type="primary" @click="handleManager(index)">管理</a-button>
                </template>
            </template>
        </Table>
        <a-modal width="60vw" v-model:visible="modalVisible" :footer="null" :keyboard="false" :maskClosable="false"
                 @cancel="handleModalCancel">
            <div mt-8/>
            <Chapter v-for="(chapter, idx) in chapters" :key="idx" :index="idx" :title="chapter.title"
                     :expand-init="false" mb
                     not-allow-operation>
                <Episode v-for="(episode, subIdx) in chapter.episodeList" :key="subIdx" :index="subIdx"
                         :title="episode.title"
                         :chapter-index="idx" :hwyun-id="episode.hwyun_id" not-allow-operation/>
            </Chapter>
        </a-modal>
    </div>
</template>